<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>

	<head>
		<title>会议室</title>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="format-detection" content="telephone=no">
		<meta name="description" content="北京规划院 移动办公 OA 自动化">
		<link rel="stylesheet" href="//cdn.bootcss.com/weui/1.1.1/style/weui.min.css">
		<link rel="stylesheet" href="//cdn.bootcss.com/jquery-weui/1.1.1/css/jquery-weui.min.css">
		<link rel="stylesheet" href="${base}/css/font-awesome-4.7.0/css/font-awesome.css" />
		<link rel="stylesheet" href="${base}/css/date.css" />
		<%
		    String userid=(String)request.getAttribute("loginuser");
		%>

		<style>
			html,
			body,
			.page {
				height: 100%
			}
			
			#pub,
			#pri {
				overflow: auto;
				height: 100%
			}
			
			.weui-navbar {
				width: 70%;
				margin-left: 15%;
				margin-top: 5px;
				margin-bottom: 10px;
				border: 1px solid #ddd;
				border-radius: 30px;
			}
			
			.weui-mask,
			.weui-dialog {
				opacity: 1;
				visibility: visible;
			}
			
			.weui-dialog__bd {
				line-height: 40px
			}
			
			.weui-navbar__item {
				padding: 3px 0;
				cursor: pointer;
			}
			
			#pub_room.weui-bar__item--on {
				border-bottom-left-radius: 30px;
				border-top-left-radius: 30px;
			}
			
			#pri_room.weui-bar__item--on {
				border-bottom-right-radius: 30px;
				border-top-right-radius: 30px;
			}
			
			.weui-tab__bd {
				background-color: #EFEFF4;
			}
			
			.weui-navbar:after {
				border: 0;
			}
			
			#container .weui-cells {
				margin: 3px auto !important;
				margin-left: 1.5%;
				width: 95%;
				border-radius: 5px;
			}
		</style>
	</head>

	<body>
		<div class="page" id="container">
			<div class="weui-tab">
				<div class="weui-navbar">
					<div class="weui-navbar__item weui-bar__item--on" id="pub_room">
						公共会议室
					</div>
					<div class="weui-navbar__item" id="pri_room">
						自定义会议室
					</div>
				</div>
				<div class="weui-tab__bd">
					<div id="pub">
					</div>
					<div id="pri" style="display: none;">
						<div id="pri_roomlist">
						</div>
						<div class="weui-cells" style="margin-top:20px !important;" id="create_room">
							<a class="weui-cell weui-cell_access">
								<div class="weui-cell__hd" style="position: relative;margin-right: 10px;">
									<i class="fa fa-plus-square" style="width: 46px;height: 46px;font-size: 46px;color: #10AEFF;"></i>
								</div>
								<div class="weui-cell__bd">
									<p style="font-size: 16px;color: #888888;">创建 自定义会议室</p>
								</div>
							</a>
						</div>
					</div>

				</div>

			</div>
		</div>
		<div class="page" id="room_build" style="background:  #EFEFF4;display: none;">
			<div class="weui-tab">
				<div class="weui-tab__bd">
					<div style="font-size:12px;color: #ADADAD;height: 30px;line-height: 30px;margin-left: 4%;">会议室信息</div>
					<div class="weui-cells weui-cells_form" style="margin-top: 0px;">
						<div class=weui-cell>
							<div class=weui-cell__hd><label class=weui-label>名称</label></div>
							<div class=weui-cell__bd> <input id="title" class=weui-input type=text required placeholder=输入会议室名称> </div>
							<div class=weui-cell__ft> <i class=weui-icon-warn></i> </div>
						</div>
						<div class=weui-cell>
							<div class=weui-cell__hd><label class=weui-label>备注</label></div>
							<div class=weui-cell__bd> <input id="content" class=weui-input type=text required placeholder=输入位置等信息> </div>
							<div class=weui-cell__ft> <i class=weui-icon-warn></i> </div>
						</div>
					</div>
					<div class="weui-cells__tips">创建后的会议室会在自定义会议室里显示</div>
					<div class="weui-btn-area">
						<a class="weui-btn weui-btn_primary" href="javascript:" onclick="roomcreate()">确定</a>
					</div>
				</div>
			</div>
		</div>
		<!--BEGIN dialog2-->
		<div class="js_dialog" id="iosDialog2" style="display:none">
			<div class="weui-mask"></div>
			<div class="weui-dialog">
				<div class="weui-dialog__hd"><strong class="weui-dialog__title">创建成功！</strong></div>
				<!--<div class="weui-dialog__bd">3s后将跳转至我的保修单页面</div>-->
				<div class="weui-dialog__ft">
					<a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary" onclick="dialogHide()">确定</a>
				</div>
			</div>
		</div>
		<!--END dialog2-->
		<script src="//cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
		<script src="//cdn.bootcss.com/jquery-weui/1.1.1/js/jquery-weui.min.js"></script>
		<script>
			function parseURL(url) {
				if(url.indexOf("?") == -1) return
				var url = url.split("?")[1];
				var res = [];
				if(url.indexOf("&") == -1) {
					var arr = url.split("=");
					res[arr[0]] = arr[1]
				} else {
					var arr = url.split("&");
					for(var i = 0; i < arr.length; i++) {
						var key = arr[i].split("=");
						res[key[0]] = key[1]
					}
				}
				return res

			}
			var url2 = window.location.href;
			url2 = decodeURIComponent(url2)
			var res = parseURL(url2)
			if(res!=undefined&&res.type=="pri"){
				$('#pri_room').addClass("weui-bar__item--on").siblings().removeClass("weui-bar__item--on");
				$("#pri").show().siblings().hide()
			}
			$(function() {
				$.post("${base}/meet/myfocus", function(data) { //查询公共会议室
					var html = "";
					for(var i = 0; i < data.length; i++) {
						html += '<div class="weui-cells">'
						html += '<a class="weui-cell weui-cell_access" data-flag="' + data[i].flag + '"  data-id="' + data[i].xh + '"  data-device="' + data[i].device + '">'
						html += '<div class="weui-cell__hd" style="position: relative;margin-right: 10px;">'
						html += '<img src="img/2.jpg" alt="" width="46px" />'
						html += '</div>'
						html += '<div class="weui-cell__bd">'
						html += '<p>' + data[i].roomname + '</p>'
						html += '<p style="font-size: 13px;color: #888888;margin-top: 5px;">' + data[i].bz + '</p>'
						html += '</div>'
						html += '<div class="weui-cell__ft"></div>'
						html += '</a>'
						html += '</div>'
					}
					$("#pub").html(html)
				})
				$.post("${base}/meet/mycreate", function(data) { //查询自定义会议室
					//alert(data.roomli.length);
					var html = "";
					for(var i = 0; i < data.length; i++) {
						html += '<div class="weui-cells">'
						html += '<a class="weui-cell weui-cell_access" data-flag="' + data[i].flag + '"  data-id="' + data[i].xh + '">'
						html += '<div class="weui-cell__hd" style="position: relative;margin-right: 10px;">'
						html += '<img src="img/2.jpg" alt="" width="46px" />'
						html += '</div>'
						html += '<div class="weui-cell__bd">'
						html += '<p>' + data[i].roomname + '</p>'
						html += '<p style="font-size: 13px;color: #888888;margin-top: 5px;">' + data[i].bz + '</p>'
						html += '</div>'
						html += '<div class="weui-cell__ft"></div>'
						html += '</a>'
						html += '</div>'
					}
					$("#pri_roomlist").html(html)
				})
			});
			$("#pub_room").click(function() {
				$(this).addClass("weui-bar__item--on").siblings().removeClass("weui-bar__item--on");
				$("#pub").show().siblings().hide()
			})
			$("#pri_room").click(function() {
				$(this).addClass("weui-bar__item--on").siblings().removeClass("weui-bar__item--on");
				$("#pri").show().siblings().hide()
			})
			$("#create_room").click(function() {
				$("#room_build").show().siblings().hide();
				$("#title").val('');
				$("#content").val('');
			})

			function roomcreate() {
				var name = $("#title").val();
				var content = $("#content").val();
				$.post("${base}/meet/create", {
					roomname: name,
					bz: content
				}, function(data) {
					if(data.res == true) {
						$.post("${base}/meet/mycreate", function(data) { //查询自定义会议室
							var html = "";
							for(var i = 0; i < data.length; i++) {
								html += '<div class="weui-cells">'
								html += '<a class="weui-cell weui-cell_access" data-flag="' + data[i].flag + '"  data-id="' + data[i].xh + '">'
								html += '<div class="weui-cell__hd" style="position: relative;margin-right: 10px;">'
								html += '<img src="img/2.jpg" alt="" width="46px" />'
								html += '</div>'
								html += '<div class="weui-cell__bd">'
								html += '<p>' + data[i].roomname + '</p>'
								html += '<p style="font-size: 13px;color: #888888;margin-top: 5px;">' + data[i].bz + '</p>'
								html += '</div>'
								html += '<div class="weui-cell__ft"></div>'
								html += '</a>'
								html += '</div>'
							}
							$("#pri_roomlist").html(html)
						});
						$(".weui-dialog__title").html("创建成功！")
						$("#iosDialog2").show()
					} else {
						$(".weui-dialog__title").html("创建失败！")
						$("#iosDialog2").show()
					}
				})

			}

			function dialogHide() {
				$("#iosDialog2").hide()
				$("#container").show().siblings().hide()
			}
			$("#pub,#pri_roomlist").on("click", ".weui-cell_access", function() {
				var xh = $(this).attr("data-id");
				var flag = $(this).attr("data-flag");
				var device = $(this).attr("data-device");
				var room = $(this).children().next().children().html()
				var href = "${base}/meet/meetrc?xh=" + xh + "&room=" + room + "&flag=" + flag + "&device=" + device;
				location.href = href
			})
		</script>
	</body>

</html>